/*
 * sFlow v1.0 
 */
.flow-box-list{
  position: relative;
  visibility: hidden;
  margin-top: 10px;
}
.flow-box{
    width: 150px;
    float: left;
    border: 1px solid #ddd;
    color: #666;
    text-align: center;
    line-height: 50px;
}
/* s形流程图 箭头样式 */
.flow-arrow{
  position: absolute;
  top: 50%;
  margin-top: -5px;
}
.odd.last .flow-arrow,.even.last .flow-arrow{
    margin-left: 50%;
    left: auto;
    right: auto;
    top: 100%;
    margin-top: 0;
  -webkit-transform:rotate(-90deg); 
     -moz-transform:rotate(-90deg); 
          transform:rotate(-90deg);
}
.flow-arrow>div {
    display: block;
    border: 5px solid rgba(0,0,0,0);
    border-left:10px solid #ddd;
    border-right: none;
    width: 0;
    height: 0;
    float: right;
}
.flow-arrow>div:before{
    display: block;
    content: " ";
    position: absolute;
    left: 0;
    top: 0;
    right: 10px;
    margin-top: 4px;
    border-top-width:2px;
    border-top-style:solid;
    border-top-color:#ddd;
}
.odd .flow-arrow>div {
    border: 5px solid rgba(0,0,0,0);
    border-right-width:10px;
    border-right-style:solid;
    border-right-color:#ddd;
    border-left: none;
    width: 0;
    height: 0;
    float: left;
}
.odd .flow-arrow>div:before{
    left: 10px;
    right: 0;
}
.even.last .flow-arrow>div{
    float: left;
    border-right-width:10px;
    border-right-style:solid;
    border-right-color:#ddd;
    border-left: none;
}
.even.last .flow-arrow>div:before{
    left: 10px;
    top: 0;
    right: 0px;
}
/* 不同状态样式 */
/* info */
.flow-box.border-info{
    border-color: #4A9BFF;
}
.flow-arrow .border-info{
    border: 5px solid rgba(0,0,0,0);
    border-left:10px solid #4A9BFF;
    border-right: none;
}
.odd .flow-arrow .border-info{
    border-right-color: #4A9BFF;
}
.even.last .flow-arrow .border-info{
    border-right-color: #4A9BFF;
}
.flow-arrow .border-info:before,
.odd .flow-arrow .border-info:before,
.even .flow-arrow .border-info:before{
    border-color:#4A9BFF;
}
/* primary */
.flow-box.border-primary{
    border-color: #5C90D2;
}
.flow-arrow .border-primary{
    border: 5px solid rgba(0,0,0,0);
    border-left:10px solid #5C90D2;
    border-right: none;
}
.odd .flow-arrow .border-primary{
    border-right-color: #5C90D2;
}
.even.last .flow-arrow .border-primary{
    border-right-color: #5C90D2;
}
.flow-arrow .border-primary:before,
.odd .flow-arrow .border-primary:before,
.even .flow-arrow .border-primary:before{
    border-color:#5C90D2;
}
/* success */
.flow-box.border-success{
    border-color: #46C37B;
}
.flow-arrow .border-success{
    border: 5px solid rgba(0,0,0,0);
    border-left:10px solid #46C37B;
    border-right: none;
}
.odd .flow-arrow .border-success{
    border-right-color: #46C37B;
}
.even.last .flow-arrow .border-success{
    border-right-color: #46C37B;
}
.flow-arrow .border-success:before,
.odd .flow-arrow .border-success:before,
.even .flow-arrow .border-success:before{
    border-color:#46C37B;
}
/* warning */
.flow-box.border-warning{
    border-color: #F0A63A;
}
.flow-arrow .border-warning{
    border: 5px solid rgba(0,0,0,0);
    border-left:10px solid #F0A63A;
    border-right: none;
}
.odd .flow-arrow .border-warning{
    border-right-color: #F0A63A;
}
.even.last .flow-arrow .border-warning{
    border-right-color: #F0A63A;
}
.flow-arrow .border-warning:before,
.odd .flow-arrow .border-warning:before,
.even .flow-arrow .border-warning:before{
    border-color:#F0A63A;
}
/* danger */
.flow-box.border-danger{
    border-color: #C54736;
}
.flow-arrow .border-danger{
    border: 5px solid rgba(0,0,0,0);
    border-left:10px solid #C54736;
    border-right: none;
}
.odd .flow-arrow .border-danger{
    border-right-color: #C54736;
}
.even.last .flow-arrow .border-danger{
    border-right-color: #C54736;
}
.flow-arrow .border-danger:before,
.odd .flow-arrow .border-danger:before,
.even .flow-arrow .border-danger:before{
    border-color:#C54736;
}
/* 其他 */
.top-msg{
    text-overflow: ellipsis;
    display: block;
    padding:15px 14px 10px 14px;
    border-bottom:1px solid #DDDDDD; 
    font-size: 12px;
}
.bottom-msg{
    padding:5px 14px;
    overflow: hidden;
    text-overflow: ellipsis;
    word-wrap: normal;
    white-space: nowrap;
    max-width: 100%;
}
.flow-one-bg-success{
    background-color: #dff0d8;
}
.flow-two-bg-success{
    background-color: #bcd9e6;
}